<template>
    <div class="mine">
          <div class="top">
             <div class="myjd">
                <div class="esc" @click="es">&lt;</div>
                <div class="myj">我的京东</div>
                <div class="z"><b>...</b></div>
             </div>
             <div class="sign">
               <img src="https://img11.360buyimg.com/jdphoto/s120x120_jfs/t21160/90/706848746/2813/d1060df5/5b163ef9N4a3d7aa6.png" alt="">
               <div class="user">
                  <div class="name">User_0821</div>
                  <div class="t">
                     <div class="t1">京享值</div>
                     <div class="t2">小白守约999分&gt;</div>
                  </div>
               </div>
               <div class="get">
                  <img src="https://img12.360buyimg.com/img/s40x40_jfs/t1/125926/3/7446/2181/5f15510bE3f46d483/4f25fadf9ebe91d3.png" alt="">
               </div>
             </div>
             <div class="sc">
                <div class="s">
                   <div class="s1">5</div>
                   <div class="s2">商品收藏</div>
                </div>
                <div class="s">
                    <div class="s1">4</div>
                   <div class="s2">店铺收藏</div>
                </div>
                <div class="s">
                    <div class="s1">2</div>
                   <div class="s2">我的足迹</div>
                </div>
             </div>
             <div class="sa">
                <img src="https://img12.360buyimg.com/img/s678x99_jfs/t1/112839/2/12981/33105/5f17e12aE602bb83e/8a736742745d79cf.png" alt="">
              <div class="pc">
                  <div class="sa1">
                   <img src="https://img12.360buyimg.com/img/s113x21_jfs/t1/132167/33/1122/2973/5ed5c74bE41e02c41/5ae83d09fff874cb.png" alt="">                 
               </div>
             <div class="text"><p>|&nbsp;&nbsp;免费试用&nbsp;立领1张运费券</p></div>
             <div class="shiyong">
                <p>0元试用&gt;</p>
             </div>
              </div>
             </div>
          </div>
          <div class="mid">
             <div class="a">
                <div class="a1">
                   <img src="https://img12.360buyimg.com/img/s60x60_jfs/t1/125209/17/7530/933/5f16524bE43b4a5f7/71971b102d1fcbc5.png" alt="">
                   <p>待付款</p>
                </div>
                 <div class="a1">
                     <img src="https://img12.360buyimg.com/img/s120x120_jfs/t1/123660/33/7797/4674/5f1804aeE308173db/b392f9ce63eb8490.png" alt="">
                   <p>待收货</p>
                 </div>
                  <div class="a1">
                      <img src="https://img12.360buyimg.com/img/s60x60_jfs/t1/120478/38/7592/2211/5f165256E02190e99/1491d4cb340074bb.png" alt="">
                   <p>退换/售后</p>
                  </div>
                   <div class="a1">
                       <img src="https://img12.360buyimg.com/img/s60x60_jfs/t1/145618/2/3439/692/5f16525eE30cd2db1/3ab434ec2686a256.png" alt="">
                   <p>全部订单</p>
                   </div>
             </div>
             <div class="b">
                <div class="b1">
                   <div class="b11">2</div>
                   <div class="b12">优惠卷</div>
                </div>
                <div class="b2">
                   <div class="b21">1700.00</div>
                   <div class="b22">白条额度</div>
                </div>
                <div class="b1">
                   <div class="b11">20</div>
                   <div class="b12">京豆</div>
                </div>
                <div class="b1">
                   <div class="b11">1</div>
                   <div class="b12">红包</div>
                </div>
                <div class="b1">
                   <div class="b11">
                      <img src="https://img12.360buyimg.com/img/s60x62_jfs/t1/124603/26/7654/1293/5f16621fE5203989a/ac40297eb801ec8d.png" alt="">
                   </div>
                   <div class="b12">我的资产</div>
                </div>
             </div>
             <div class="c">
                <img src="https://img12.360buyimg.com/img/s750x98_jfs/t1/137036/22/22941/72603/6216ec7aE4ba88584/ddbf5ebdb080083b.png.webp" alt="">
             </div>
             <div class="d">
                <div class="ti">
                   <p>工具与服务</p>
                </div>
                <div class="da">
                   <div class="da1">
                      <div class="da11">
                         <img src="https://img12.360buyimg.com/img/s70x70_jfs/t1/135809/4/7014/5528/5f35369dE8aff3fab/f4b952a87ea33ae4.png.webp" alt="">
                      </div>
                      <div class="da12">客户服务</div>
                   </div>
                    <div class="da1">
                        <div class="da11">
                              <img src="https://img12.360buyimg.com/img/s70x70_jfs/t1/143427/38/5400/4413/5f350384Edba4458b/bfcb210d2110a7d8.png.webp" alt="">
                        </div>
                      <div class="da12">我的预约</div>
                    </div>
                     <div class="da1">
                         <div class="da11">
                               <img src="https://img12.360buyimg.com/img/s70x70_jfs/t1/138657/15/5351/5178/5f3504ceE3707cfd0/bc8ff48c8edcc5b1.png.webp" alt="">
                         </div>
                      <div class="da12">我的回答</div>
                     </div>
                      <div class="da1">
                          <div class="da11">
                                <img src="https://img12.360buyimg.com/img/s70x70_jfs/t1/126073/34/9502/6741/5f350800Ee00c0d35/43485badf62439e9.png.webp" alt="">
                          </div>
                      <div class="da12">高价回收</div>
                      </div>
                </div>
             </div>
          </div>
          <div class="bottom">
             <div class="bo1"><hr></div>
             <div>*为您推荐*</div>
             <div class="bo1"><hr></div>           
          </div>
          <div class="recommend-box">
          <recommend v-for="recommends in recommendsinf" 
          :key="recommends.id"
          :imgsrc="recommends.imgsrc"
          :ziying="recommends.ziying"
          :title="recommends.title"
          :price="recommends.price"
          :type="recommends.type"/>
        </div>
    </div>
</template>
<script>
import axios from "axios"
import recommend from './index/recommend.vue'
export default {
   name:'mine',
   components:{  
    recommend,
},
   data() {
      return {
         //当前展示的推荐商品
        recommendsinf: [],
        //获取到的所有商品信息
        recommendsinfs: []
      }
   },
   async created(){
       //得到商品分类json信息
      const res2 = await axios.get("http://localhost:8080/recommend.json");
      this.recommendsinfs = res2.data
      for(var x=0;x<18;x++){
           this.recommendsinf.push(this.recommendsinfs[x])
      }
    },
   computed:{
   },
   methods:{
      es(){
         this.$router.replace('/index')
      }
   },
}
</script>
<style scoped>
.mine{
   background: rgba(212, 212, 212, 0.1);
}
.top{
   width: 100%;
   height: 250px;
   background-image: url(https://img12.360buyimg.com/img/s1500x886_jfs/t1/115726/22/13102/240974/5f18fb83Ee40e230b/d4f2a67087fd443a.png);
   background-color: rgb(224, 63, 63);
   position: relative;
   background-size: 113%;
}
.myjd{
   width: 100%;
   display: flex;
   height: 45px;
   background-color: white;
   position: relative;
}
.esc{
    float: left;
    height: 45px;
    width: 40px;
    line-height: 45px;
    text-align: center;
    font-size: 20px;
}
.myj{
    font-size: 16px;
    height: 45px;
    width: 305px;
    line-height: 45px;
    text-align: center;
    position: relative;
}
.z{
   position: relative;
   font-size: 20px;
   float:right;
   right: -4px;
   height: 40px;
   width: 40px;
   line-height: 35px;
   text-align: center;
}
.sign{
   width: 372.4px;
   height: 90px;
   padding-left: 18px;
   padding-bottom: 18px;
   padding-top: 12px;
   position: relative;
}
.get{
   position: absolute;
   right:-2%;
   top: 21%;
}
.sign .get img{
   width: 20px;
   height: 20px;
}
.user{
   position:absolute;
   height: 50px;
   top: 13px;
   left: 79px;
}
.sign img{
    width: 50px;
    height: 50px;
 }
 .name{
    font-size: 18px;
    color: white;
    padding-bottom: 5px;
 }
 .t{
     display: flex;
     /* position: relative;
     top: -45px;
     left: 64px; */
 }
 .t1{
    font-size: 10px;
    color: white;
    height: 16px;
    border-radius: 10px;
    margin: 0 8px 0 0;
    padding: 0 8px;
    text-align: center;
    line-height: 16px;
    background: rgba(0,0,0,0.2);
 }
 .t2{ 
    font-size: 10px;
    color: white;
    height: 16px;
    border-radius: 10px;
    margin: 0 8px 0 0;
    padding: 0 8px;
    text-align: center;
    line-height: 16px;
    background: rgba(0,0,0,0.2);
 }
 .sc{
      display: flex;

 }
 .sa{
    position: relative;
    top: 5.3%;
    left: 9%;
 }
 .sa1{
    position: absolute;
    top:0px;
 }
 .pc{
    width: 310px;
    height: 18px;
    margin: 0 10px;
    display: flex; 
    position:absolute;
    top: 50%;
    transform: translateY(-50%);   
 }
 .text{
    align-items: center;
    width: 60%;
    height: 100%;
    padding: 0 10px;
    font-size: 12px;
    background-size: cover;
    color: #FFE678;
    position:relative;
    left: 55px;
 }
 .shiyong{
    background-image: linear-gradient(-50deg,#ffe36f,#f6d44e);
    color: #262626;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    padding: 0 10px;
    height: 18px;
    right: -10px;
    position: absolute;
    border-radius: 10px;
 }
 .pc .sa1 img{
     width: 57px;
     height: 14px;
 }
 .sa img{
     width: 340px;
     height: 42px;
 }
 .s{
    width: 128.8px;
    height: 50px;
    color: white;
  
 }
 .s1{
    width: 128.8px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
 }
 .s2{
    width: 128.8px;
    height: 34px;
     line-height: 34px;
    text-align: center;
    font-size: 12px;
 }
 .mid{
   
    background: rgba(139, 139, 139, 0.1);
 }
 .a{
    padding: 0 14px;
    display: flex;
    padding-top: 18px;
    margin-top: 10px;
    position: relative;
    top: -20px;
    height:80px;   
    border-radius: 15px;
    background: white;
 }
 .a img{
    width: 30px;
    height: 30px;
 }
 .a1{
    width: 96.6px;
    height: 51px;
    font-size: 12px;
    text-align: center;
 }
 .b{
    width: 100%;
    padding: 0 14px;
    display: flex;
    position: relative;
    height:80px;   
    border-radius: 15px;
    background: white;
 }
 .b1{
    width: 74.188px;
    height: 53px;
    padding: 17px 0 10px;
    text-align: center;
 }
 .b2{
    width: 80px;
    height: 53px;
    padding: 17px 0 10px;
    text-align: center;
 }
 .b21{
    width: 89.675px;
    height: 20px;
    font-size: 20.99px;
    font-weight: 700;
 }
 .b22{
    width:89.675px;
    height:14.4px ;
    margin-top: 16px;
    font-size:12px;
 }
 .b11{
    width: 74.188px;
    height: 20px;
    font-size: 20.99px;
    font-weight: 700;
 }
 .b11 img{
    width: 30px;
    height: 30px;
 }
 .b12{
    width:74.188px;
    height:14.4px ;
    margin-top: 16px;
    font-size: 12px;
 }
 .c{
    width: 100%;
    left: 0px;
    position: relative;
    top: 18px;
 }
 .c img{
       height: 54px;
       width: 100%;
 }
 .d{
    margin: 15px 0;
    position: relative;
    top: 20px;
    background:white;
    border-radius: 15px;
    width: 100%;
    height: 50px;
 }
 .ti{
    position: relative;
    font-size: 14px;
    color: #000;
    height: 38px;
    line-height: 38px;
    padding-left: 18px;
    font-weight: 700;
 }
 .da{
    position: relative;
    padding-bottom: 10px;
    height:80px;
 }
 .da1{
    text-align: center;
    float: left;
    width: 25%;
    position: relative;
    padding-top: 12px;
 }
 .da11 img{
    width: 35px;
    height: 35px;
 }
 .da11{
    display: block;
    margin: 0 auto 6px;
    width: 35px;
    height: 35px;
 }
 .da12{
    font-size: 12px;
    color: #262626;
    line-height: 1.2;
 }
 .bottom{
    width: 100%;
    padding: 15px 0;
    position: relative;
    top: 35px;
    font-size: 12px;
    display: flex;
    color: rgba(128, 128, 128, 0.9);
    background: rgba(212, 212, 212, 0.1);
 }
 .bo1{
    width: 42%;
    position: relative;
    transform: translateY(50%);
 }
 .recommend-box{
    position: relative;
    top: 20px;

 }
 .recommend{
    border-radius: 0;
 }
</style>

